.BeiHuanBMap {
	.BeihuanBox {
		width: 1px;
		height: 1px;
		position: relative;
		z-index: 1;
		perspective: 1000px;
		user-select: none;

		& > .Text {
			position: absolute;
			padding: 8px 32px;
			bottom: 40px;
			white-space: nowrap;
			transform: translateX(-50%);
			transform-style: preserve-3d;
			transition: transform 0.05s;
			background: linear-gradient(
				45deg,
				rgba(172, 58, 43, 0.6),
				rgba(15, 51, 71, 0.6)
			);
			backdrop-filter: blur(8px);
			cursor: pointer;
			font-family: ShuHeiTi;
			font-weight: bold;
			font-size: 18px;
			color: #ffffff;
			animation: rotate 2s linear infinite;

			&::after {
				position: absolute;
				content: "";
				left: 0;
				bottom: -6px;
				height: 4px;
				width: 64%;
				background: linear-gradient(
					45deg,
					rgba(172, 58, 43, 0.6) 60%,
					rgba(15, 51, 71, 0.6)
				);
				backdrop-filter: blur(8px);
			}

			&::before {
				position: absolute;
				content: "";
				right: 0;
				bottom: -6px;
				height: 4px;
				width: 36%;
				background-image: linear-gradient(
					90deg,
					transparent 50%,
					rgba(15, 51, 71, 0.6) 50%
				);
				background-size: 8px 100%;
				/* 定义虚线的宽度和高度 */
			}

			& > .front {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			& > .back {
				display: none;
				transform: rotateY(180deg);

				& > div {
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			span {
				font-family: ShuHeiTi;
				font-weight: bold;
				font-size: 30px;
				color: #ffeb7e;
				margin: 0 16px;
			}
		}

		&:hover {
			& > .Text {
				transform: translateX(-50%) rotateY(180deg);

				& > .front {
					display: none;
				}

				& > .back {
					display: block;
				}
			}
		}
	}

	.MonitorRender {
		width: 8px;
		height: 8px;
		position: relative;
		border-radius: 50%;
		background: linear-gradient(
			0deg,
			rgba(1, 115, 132, 1),
			rgba(17, 45, 89, 1)
		);
		z-index: 1;
		user-select: none;

		&::after {
			position: absolute;
			content: "";
			left: 2px;
			bottom: 2px;
			width: 4px;
			height: 140px;
			background-image: linear-gradient(
				0deg,
				transparent 50%,
				rgba(15, 51, 71, 0.6) 50%
			);
			background-size: 100% 16px;
			z-index: -1;
		}

		& > .Text {
			position: absolute;
			padding: 8px 32px;
			bottom: 140px;
			white-space: nowrap;
			transform: translateX(-50%);
			transform-style: preserve-3d;
			background: linear-gradient(
				0deg,
				rgba(1, 115, 132, 1),
				rgba(17, 45, 89, 1)
			);
			border: 1px solid #759bb3;
			font-family: ShuHeiTi;
			font-weight: bold;
			font-size: 18px;
			color: #ffffff;
			cursor: pointer;

			& > img {
				position: absolute;
				left: calc(50% - 55px);
				bottom: 100%;
				width: 110px;
				height: 100px;
				display: block;
			}
		}
	}
}

@keyframes rotate {
	0% {
		bottom: 40px;
	}

	50% {
		bottom: 20px;
	}
}
